<template>
  <div class="createHelpName">
    createHelpName
    <div>{{ userCount }}</div>
    <button @click="add2(2)">(异步)+2</button>
    <button @click="addmutations(2)">(同步加)+2</button>
    <hr>
    <div>composiiton api的使用</div>
    <div>userState: {{ userState }}</div>
    <div>getterss: {{ getterss }}</div>
    <button @click="addCom(10)">+10</button>
    <button @click="decrtement(10)">-10</button>
    <button @click="addActiona(20)">+20</button>
    <button @click="decrementa(30)">-30</button>
  </div>
</template>
<script>
import { computed } from 'vue'
import { createNamespacedHelpers, useStore } from 'vuex'
const { mapState, mapGetters, mapActions, mapMutations } = createNamespacedHelpers('user')
export default {
  computed: {
    ...mapState(['userCount']),
    ...mapGetters({
      getters2: 'addGetters'
    })
  },
  methods: {
    ...mapActions({
      add2: 'addAction'
    }),
    ...mapMutations({
      addmutations: 'addUserMutaition'
    })
  },
  setup () {
    const store = useStore()
    const userState = computed(() => store.state.user.userCount)
    const getterss = computed(() => store.getters['user/addGetters'])
    const action1 = mapActions({
      addCom: 'addAction',
      decrtement: 'increAction'
    })
    const mutations = mapMutations({
      addActiona: 'addUserMutaition',
      decrementa: 'increment'
    })
    return {
      userState,
      getterss,
      ...action1,
      ...mutations
    }
  }
}
</script>
<style scoped>
.createHelpName {}
</style>
